<template>
  <yd-navbar 
    :title="title" 
    :class="cusclass" 
    :fixed="fixed" 
    :color="color" 
    :bgcolor="bgcolor"
    :style="styles">
      <a slot="left" @click="backView" href="javascript:;">
        <yd-navbar-back-icon :color="color"></yd-navbar-back-icon>
      </a>
  </yd-navbar>
</template>
<script>
  export default {
    name: 'hd-header',
    data () {
      return {
        fixed: true
      }
    },
    props: {
      title: String,
      sticky: Boolean,
      color: {
        validator (value) {
          if (value) {
            return value
          }
        },
        default: '#ffffff'
      },
      bgcolor: String
    },
    computed: {
      styles() {
        const style = {}
        // 设置了 bcolor 使用 bcolor,否则样式默认为没有背景色inherit
        if (this.bgcolor) {
          style.backgroundColor = this.bgcolor
        } else {
          style.backgroundColor = 'inherit'
        }
        return style
      },
      cusclass() {
        // 如果设置 sticky 属性, 就取消 fixed 属性
        if (this.sticky) {
          this.fixed = false
          return 'hd-header hd-header-postion'
        }
        return 'hd-header'
      }
    },
    methods: {
      // 返回上一页
      backView() {
        return this.$router.go(-1)
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .hd-header-postion
    position sticky
  .hd-header:after
    border-bottom none !important
</style>

